<template>
  <div class="component-page">
    <h1 class="user-title">提币</h1>
    <div class="risk-hint">
      <i class="el-icon-warning"></i>
      <div class="header-hint">
        <p>风险提示}</p>
        <p>您的提币操作一旦完成，对应的资产所有权将由您变更为目标地址所对应的账户所有人享有，请您务必在提币操作前，仔细核对提币地址信息，确保提币属于自愿行为，并确认不涉及任何传销、非法集资、诈骗等违法情形，谨防上当受骗，避免造成不必要的财产损失。</p>
      </div>
    </div>
    <div class="box">
      <p class="hint-text">币种选择</p>
      <el-select
        v-model="coin"
        placeholder="请选择"
        class="coin-select"
        @change="coinSelectChange(coin)"
      >
        <el-option
          v-for="item in otcCoinList"
          :key="item.value"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div class="box">
      <template v-if="item.AccountName!='BTC'">
        <p class="hint-text">链名称</p>
        <div class="support-box">
          <button
            v-for="(info,index) in item.AssetInfo"
            :key="index"
            class="coin-btn cursor"
            :disabled="info.IsOpen==0"
            :class="info.IsOpen==0?'btnDis':(mentionChain==info.ChannelName?'coinIsClick':'')"
            @click="coinClick(index)"
          >
            {{info.ChannelName}}
            <template>
              <i class="triangle-bottomright"></i>
              <i class="el-icon-check"></i>
            </template>
          </button>
        </div>
      </template>

      <!-- 表单 -->
      <el-form
        label-position="top"
        label-width="80px"
        :model="menthionForm"
        :rules="methionrules"
        ref="methionform"
        class="meation-form"
      >
        <div class="toup-adress-hint">
          <span>提币地址</span>
          <div class="toup-adress-hint">
            <div class="toup-adress-hint">
              <span>可用数量:&nbsp;</span>
              <span class="color-text">123 BTC</span>
            </div>
            <div class="toup-adress-hint right-last-box">
              <span>限额:&nbsp;</span>
              <span>456 BTC</span>
            </div>
          </div>
        </div>
        <el-form-item prop="adress">
          <el-input v-model="menthionForm.adress"></el-input>
        </el-form-item>
        <div class="toup-adress-hint">
          <span>提币数量</span>
          <span>最小提币数量: 1 BTC</span>
        </div>
        <el-form-item prop="num">
          <el-input v-model="menthionForm.num" @input.native="numInput($event,item.Length)"></el-input>
        </el-form-item>

        <div class="inline-input-box">
          <el-form-item class="inline-item" prop="rate">
            <el-col :span="11">
              <div class="col-test">
                <div class="toup-adress-hint inline-hint-box">
                  <span>手续费</span>
                </div>
                <el-input class="inline-input" v-model="menthionForm.rate" :disabled="true"></el-input>
                <span class="input-hint-cointype">{{ item.AccountName }}</span>
              </div>
            </el-col>
          </el-form-item>
          <el-form-item class="inline-item" prop="autual">
            <el-col :span="11">
              <div class="toup-adress-hint">
                <span>实际到账</span>
              </div>
              <el-input v-model="menthionForm.autual" class="inline-input" :disabled="true"></el-input>
            </el-col>
          </el-form-item>
        </div>

        <div class="toup-adress-foooter">
          <div class="footer-box-left">
            <p class="footer-left-text">申请结果将以发送邮件的方式告知您}</p>
            <p class="footer-left-text">请务必确认电脑及浏览器安全，防止信息被篡改或泄露。</p>
          </div>
          <div class="footer-box-right">
            <el-form-item class="footer-inline-item" prop="moneyPsw">
              <el-col :span="4" class="el-col">
                <el-input
                  :type="pwdType?'password':'text'"
                  v-model="menthionForm.moneyPsw"
                  class="footer-inline-input"
                  placeholder="请输入资金密码"
                  show-password
                >
                 
                </el-input>
              </el-col>
            </el-form-item>
            <el-button type="success" class="toup-form-btn" @click="confirmBtn">确认</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      otcCoinList: [
        {
          name: "BTC",
          id: 1
        },
        {
          name: "ETH",
          id: 2
        }
      ],
      coin: "ETH",
      mentionChain: "ERC20",
      // 空数据为了初始加载的占位
      item: {
        AssetInfo: [{ ChannelName: "ERC20" }]
      },
      // 当前链
      currentChain: "",
      pwdType: true,
      // 当前提币id
      ChannelId: "",
      menthionForm: {
        adress: "",
        num: "",
        // 手续费
        rate: "",
        // 实到账
        autual: "",
        // 密码
        moneyPsw: ""
      },
      userInfo: "",
      //  表单验证规则
      methionrules: {
        adress: [
          { required: true, message: "表单不能为空", trigger: "blur" },
          {
            trigger: "blur"
          }
        ],
        num: [
          { required: true, message: "表单不能为空", trigger: "blur" },
          {
            trigger: "blur"
          }
        ],
        moneyPsw: [
          { required: true, message: "表单不能为空", trigger: "blur" },
          {
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    /*
     *提币请求提交
     */
    confirmBtn() {},

    /*
     *可用链的点击事件
     */
    coinClick(index) {},
    /*
     *下拉框切换事件
     */
    coinSelectChange(coin) {
      console.log("当前点击的coin", coin);
      this.reqChannel(coin);
      this.$refs.methionform.resetFields();
      this.ChannelId = 0;
    },
    /*
     *用户提币通道的请求
     */
    reqChannel(coin) {},
    // 用户输入，费率计算
    numInput(e, num) {}
  },

  computed: {},

  created() {},

  mounted() {}
};
</script>
<style scoped>
/* 提币地址 */
.meation-form {
  width: 776px;
}
.risk-hint {
  background-color: #fdf0ef;
  border: solid 1px #c9655d;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  padding: 19px 25px 16px 19px;
  margin: 31px 19px 19px 19px;
}
.el-icon-warning {
  color: #c9655d;
  background-color: #fff;
  /* overflow: hidden; */
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  border-radius: 50%;
  position: relative;
  top: 2px;
  margin-right: 12px;
}
.header-hint {
  color: #666666;
  font-size: 12px;
  line-height: 20px;
}
.header-hint p {
  display: inline-block;
}
.toup-adress-hint {
  display: flex;
  justify-content: space-between;
  height: 35px;
  color: #999999;
  font-size: 12px;
  line-height: 25px;
}
.right-last-box {
  margin-left: 32px;
}
.color-text {
  color: #31c0ce;
}
.inline-input-box {
  display: flex;
  justify-content: space-between;
}
.inline-input {
  width: 378px;
}
.inline-item {
  width: 398px;
  position: relative;
}
.col-test {
  width: 398px;
  position: relative;
}
.inline-hint-box {
  display: flex;
  width: 398px;
}
.input-hint-cointype {
  position: absolute;
  color: #999999;
  font-size: 12px;
  right: 35px;
  display: inline-block;
  bottom: 0px;
}
.footer-box-left {
  color: #cccccc;
  font-size: 12px;
  width: 380px;
}
.footer-left-text {
  margin-top: 19px;
  line-height: 18px;
  display: inline-block;
}
.toup-adress-foooter {
  display: flex;
  justify-content: space-between;
}
.footer-box-right {
  width: 200px;
  padding-top: 10px;
}
.footer-inline-item {
  width: 150px;
  float: right;
}
.footer-inline-input {
  width: 150px;
}
.toup-form-btn {
  width: 150px;
  height: 46px;
  background-color: #31c0ce;
  border: none;
  float: right;
}
.toup-form-btn:hover {
  background-color: #53d5e0;
}
.toup-form-btn:focus {
  background-color: #53d5e0 !important;
}
.eye-img {
  width: 20px;
  height: 20px;
  margin-top: 10px;
}
.box {
  padding: 0 20px 20px 20px;
}
.coin-select {
  width: 776px;
  height: 17px;
  margin: 12px 0 20px 0;
}
.hint-text {
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
}

.support-box {
  display: flex;
  margin: 13px 0 20px 0;
}
.coin-btn {
  width: 134px;
  height: 48px;
  border-radius: 4px;
  background-color: #f5f3f9;
  border: solid 1px #eeeeee;
  margin-right: 44px;
  font-size: 14px;
  color: #333333;
  position: relative;
}
.coinIsClick {
  border: solid 1px #54c9c4;
}
.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 28px solid #31c0ce;
  border-left: 28px solid transparent;

  line-height: 28px;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
}
.el-icon-check {
  color: #fff;
  position: absolute;
  right: 1px;
  bottom: 2px;
  font-weight: bold;
}
.btnDis {
  color: #c4c2c2;
}
</style>
